<template>
	<view class="container">
		<!-- 数据内容 -->
		<navBar :title="openType == 'guarantee'?'附近售后门店':'选择门店'" marginLeft="40%" :showHome="false"/>
		<view class="main-wrap" v-if="data.length" :style="{paddingTop: paddingTop+ 'px'}">
			<view class="mw-content" v-for="item in data" :key="item.id" @click="handleChecked(item)">
				<view class="mwc-top">
					<view class="mwct-img">
						<image :src="item.photo1" mode="scaleToFill"></image>
					</view>
					<view class="mwct-info">
						<view class="mwcti-title">
							<text class="mwctit-name">
								{{ item.name}}
							</text>
							<text class="mwctit-tag" v-if="item.lastCostFlag === 1&&openType !== 'guarantee'">上次消费</text>
							<text class="mwctit-tag" v-if="item.lastCostFlag === 1&&openType === 'guarantee'">购买门店</text>
              <u--image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/gouxuan_32.png" 
              v-if="openType == 'guarantee'&& item.id==serviceStoreId" width="32px" height="32px"></u--image>
						</view>
						<view class="mwcti-eval">
							<uni-rate :max="1" :size="16" :value="1" allow-half activeColor="#CF1A1B" />
							<text class="mwctie-text">{{ item.score || '暂无评分' }}</text>
							<text class="mwctie-flag"> | </text>
							<text class="mwctie-comment">{{ item.evaluationNum || 0 }}评论</text>
						</view>
						<view class="mwcti-palce">
							<text class="mwctip-km"> {{ item.distance || 0 }}km</text>
							<text class="mwctie-flag"> | </text>
							<text class="mwctip-site"> {{ item.address }}</text>
						</view>
						<view class="mwcti-discount">
							<view class="mwctid-label" v-for="label in item.promotionLabel" :key="label.labelName">
								{{ label.labelName }}
							</view>
						</view>
					</view>
				</view>
				<view class="mwc-bottom" v-if="openType == 'guarantee'">
					<view class="mwcb-item" v-for="con in relationList" :key="con.flag"
						@click.stop="handleAction(con, item)">
						<image :src="con.icon" mode="scaleToFill"></image>
						<text class="mwcbi-title">{{ con.title }}</text>
					</view>
				</view>
			</view>
			<view class="mw-loadmore-text" v-if="showLoadMore">{{ loadMoreText }}</view>
		</view>
		<view v-if="isEmpty" class="empty">
			<image src="../../../static/empty.png"></image>
			<text>无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,mapMutations
	} from 'vuex'
	import navBar from '@/components/navBar.vue'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				// 数据内容
				openType:'index',
				data: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				total: 0,
				title:'选择门店',
				formDatas: {
					pageNum: 1,
					pageSize: 10,
					keyword: '',
					nowLat: null,
					nowLng: null,
					//     "nowLat": 22.54846,
					//     "nowLng": 114.06455,
				},
				relationList: [{
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_dianhua.png',
						title: '电话联系',
						flag: 'phone'
					},
					{
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_daohang.png',
						title: '开启导航',
						flag: 'navigation'
					}
				],
				isEmpty: false,
				paddingTop:0,
				isRequest: true, // 用于判断是否调用接口
        serviceStoreId: null
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
			...mapGetters('global', ['getTabBarIndex', 'getSystemInfo', 'getLocation'])
		},
		methods: {
			...mapMutations('global', ['setNowLocation','getNowLocation']),
			handleChecked(item) {
				uni.navigateBack({
					delta: 1,
					animationDuration: 200
				});
				this.getOpenerEventChannel().emit('setStoreAdress', item)
			},
			handleAction(con, item) {
				if (con.flag === 'phone') {
					// 区分设备
					if (uni.getSystemInfoSync().osName === 'ios') {
						uni.makePhoneCall({
							phoneNumber: item.phone
						})
					} else {
						uni.showModal({
							title: "拨打电话",
							content: item.phone,
							confirmText: "确认",
							cancelText: "取消",
							success: res => {
								if (res.confirm) {
									uni.makePhoneCall({
										phoneNumber: item.phone
									})
								}
							}
						})
					}
				} else {
					uni.openLocation({
						latitude: item.lat,
						longitude: item.lng,
						name: item.name,
						address: item.address,
					});
				}
			},
			init() {
				this.formDatas.pageNum = 1
				this.total = 0
				this.data = []
				this.isEmpty = false
			},
			getNowAddress(){
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: res => {
						const { longitude, latitude } = res
						// console.log('uni', res);
						// let x = longitude
						// let y = latitude
						// let x_pi = (3.14159265358979324 * 3000.0) / 180.0
						// let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
						// let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
						// let lngs = z * Math.cos(theta) + 0.0065
						// let lats = z * Math.sin(theta) + 0.006
						// console.log(lngs, lats);
						this.reverseAddress(longitude, latitude)
					},
					fail: res => {
						console.log('fail', res);
					}
				});
			},
			// 调用腾讯SDK获取当前定位城市信息
			reverseAddress(longitude,latitude){
				const qqmapsdk = new QQMapWX({
					// 测试key
					key: this.$mapKey
				})
				
				qqmapsdk.reverseGeocoder({
					// location: {
					// 	longitude,
					// 	latitude
					// },
					success: async (res) => {
						const { city: cityName } = res.result.ad_info
						const { location } = res.result
						await this.setNowLocation({
							cityName,
							longitude: location.lng,
							latitude: location.lat
						})
						this.initData(location.lng,location.lat)
					},
					fail: (error) => {
						console.error('error', error);
					},
				})
			},
			async initData(lng,lat) {
				if (!this.isRequest) {
					return false
				}
				uni.showLoading({
					title: '加载中...'
				})
				const {
					cityCode,
					longitude,
					latitude
				} = this.getLocation
				const {
					longitude: nowLng,
					latitude: nowLat
				} = this.getNowLocation
				this.formDatas.cityCode = cityCode
				this.formDatas.cityLng = longitude
				this.formDatas.cityLat = latitude
				this.formDatas.nowLng = lng
				this.formDatas.nowLat = lat
				this.isRequest = false
				const res = await this.$request({
					url: '/api-user/new-new-terminal/shopList',
					data: {
						...this.formDatas,
						sortType: 1,
						distance: null,
						keyword: this.keyword,
					}
				}).catch((res) => {
					this.isRequest = true
					this.init()
				})
				this.total = res.datas.count
				this.data = this.data.concat(res.datas.data)
				this.isEmpty = this.total === 0
				uni.stopPullDownRefresh();
				uni.hideLoading()

				setTimeout(() => {
					this.isRequest = true
				}, 1000)
			},
		},
		onReachBottom() {
			if (this.data.length >= this.total) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			this.formDatas.pageNum += 1
			this.initData()
		},
		onPullDownRefresh() {
			this.data = []
			this.formDatas.pageNum = 1
			this.initData();
		},
		onShow() {
			// 页面出现在前台时执行
			this.init()
			this.getNowAddress()
		},
		onLoad(option){
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			if(option.type){
				this.openType = option.type
			}
      if(option.serviceStoreId) {
        this.serviceStoreId = option.serviceStoreId
      }
		},
		onHide() {
			// 页面从前台变为后台时执行
			this.loadMoreText = "加载更多",
				this.showLoadMore = false;
			// this.$refs.popup.close()
		},
	}
</script>

<style lang="scss" scoped>
.container {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.65);
	background-color: #ffffff;
	// 条件查询
	.top-select {
		// position: fixed;
		z-index: 9;
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 88rpx;
		height: 44px;
		line-height: 44px;
		background-color: #ffffff;
		.tst-icon {
			margin-left: 8px;
		}
		
		// 选中时颜色
		.conColor, .kmColor {
			color: $uni-primary;
		}
		
		.ts-dtdw {
			display: flex;
			align-items: center;
			image {
				width: 22px;
				height: 22px;
				margin-right: 8rpx;
			}
		}
	}
	// 弹出层
	.popup-content {
		padding: 0 32rpx;
		.pc-text {
			height: 44px;
			line-height: 44px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			padding-left: 56rpx;
			&:nth-last-child(1){
				border-bottom: none;
			}
		}
	}
	
	// 数据内容
	.main-wrap {
		// 文字颜色
		.text-color {
			color: $uni-primary;
		}
		.mw-content {
			padding-top: 32rpx;
			padding-bottom: 32rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			.mwc-top {
				display: flex;
				.mwct-img image {
					width: 200rpx;
					height: 100px;
				}
				.mwct-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 12px;
					margin-left: 20rpx;
					flex: 1;
					overflow: hidden;
					.mwctie-flag {
						margin: 0 8rpx;
						color: rgba(0, 0, 0, 0.35);
					}
					// 标题
					.mwcti-title {
						display: flex;
						align-items: center;
						font-size: 15px;
						color: rgba(0, 0, 0, 0.85);
						.mwctit-name {
							display: inline-block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							flex: 1;
							text-shadow: 0 0 0.1px currentcolor;
						}
						.mwctit-tag {
							font-size: 12px;
							display: inline-block;
							color: $uni-primary;
							border: 1px solid $uni-primary;
							border-radius: 2px;
							padding: 2rpx 4rpx;
							margin-left: 18rpx;
							width: 54px;
							margin-right: 20rpx;
						}
					}
					// 评分
					.mwcti-eval {
						display: flex;
						align-items: center;
						.mwctie-text {
							margin-left: 8rpx;
						}
					}
					// 地址
					.mwcti-palce {
						display: flex;
						.mwctip-site {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 350rpx;
						}
					}
					// 优惠
					.mwcti-discount {
						display: flex;
						.mwctid-label {
							color: rgba(255, 123, 123, 1);
							border: 1px solid rgba(255, 123, 123, 1);
							background-color: #ffefef;
							padding: 4rpx 14rpx;
							margin-right: 8rpx;
							border-radius: 4px;
						}
					}
				}
			}
			
			.mwc-bottom {
				display: flex;
				justify-content: flex-end;
				padding-right: 100rpx;
				.mwcb-item {
					display: flex;
					align-items: center;
					padding: 30rpx 0 20rpx;
					margin-right: 58rpx;
					&:nth-last-child(1){
						margin-right: 0;
					}
					image {
						width: 30px;
						height: 30px;
						margin-right: 12rpx;
					}
				}
			}
		}
		
		// 加载中、
		.mw-loadmore-text {
			text-align: center;
			padding: 10px;
		}
	}

	.empty {
		width: 100%;
		height: 90vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 220px;
			height: 180px;
		 }
		text {
			font-size: 30rpx;
			color: rgba(0,0,0,0.45);
			line-height: 30rpx;
		}
	}

	// 弹出层
	.popup-view {
		position: fixed;
		left: 0;
		z-index: 10;
		width: 100%;
		background-color: #ffffff;
	}
	.popup-shadow {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
	}
}
</style>
